<script setup lang="ts">
  import avatar from   "@/assets/person/avatar.png"
  import {onMounted, reactive} from "vue";
  import {logout} from "@/api/auth/login.ts";
  import {getUserInfo, removeToken, removeUserInfo} from "@/utils/auth.ts";
  import router from "@/router";
  import {destroyDynamicRoutes} from "@/router";
  import {ElMessage} from "element-plus";

  let userInfo = reactive({
    name: "",
    phone: "",
    avatar: avatar,
    memorySpace:"",
    accountTypeName:"",
    introduction: "系统六月份后将开源，欢迎使用！"
  })

  onMounted(()=>{
    const data = JSON.parse(getUserInfo())
    userInfo.name = data.name
    userInfo.phone = data.tel
    userInfo.memorySpace = 1000 - data.memorySpace
    userInfo.accountTypeName = data.accountTypeName
  })


  const quit = () => {
    logout().then(()=>{
      removeToken();
      removeUserInfo();
      //  销毁动态路由
      destroyDynamicRoutes()
      ElMessage({
        type: "success",
        message: "登出成功"
      })
      router.push("/login");
    })
  }

</script>

<template>

  <div class="info-card">
      <el-image class="avatar" fit="contain"  :src="userInfo.avatar"></el-image>
    <div class="info-list">
      <div class="info-name">{{userInfo.name}}
      </div>
      <div class="info-phone">{{userInfo.phone}}</div>
      <div class="info-memory">
        剩余空间：<span>{{userInfo.memorySpace}}</span>MB</div>
      <div class="info-introduction">{{userInfo.introduction}}</div>
    </div>

      <el-button class="quit-btn" @click="quit">退出登录</el-button>
  </div>
</template>

<style scoped lang="scss">

.info-card{
  width: 220px;
  position: absolute;
  padding: 30px 10px;
  top: 100px;
  right: calc((100% - 1600px)/2);
  margin: auto;
  border-radius: 10px;
  background-color: #F5F5F6;

  .avatar{
    width: 80px;
    height: 80px;
    padding: 2px;
    border-radius: 40px;
    background-color: #e4e6ee;
  }

  .info-list{
    width: 220px;
    word-wrap: break-word;


    .info-name{
      font-size: 16px;
      font-weight: 500;
      margin: 10px auto;
    }

    .info-phone{
      font-weight: 600;
      line-height: 30px;
    }

    .info-memory{
      font-size: 14px;
      margin: 10px 5px;
      color: #626aef;
    }

    .info-introduction{
      font-size: 14px;
      text-align: left;
      margin: 10px 5px;
      color: #5F5F63;
    }
  }

  .quit-btn{
    width: calc(100% - 20px);
    margin: 10px;
    background-color: #F5F5F6;
  }

  .quit-btn:hover{
    color: #626aef;
    background-color: #e3e6f7;
  ;
  }
}
</style>
